<template>
  <div>
    <div class="search-content">
      <el-select v-model="searchContent.store_id" placeholder="选择店铺ID">
        <el-option
          v-for="item in options"
          :key="item.store_id"
          :label="item.store_name"
          :value="item.store_id"
        >
        </el-option>
      </el-select>
      <el-input
        class="search-content-input"
        v-model="searchContent.store_nameHandWhite"
        placeholder="请输入店铺名称"
      ></el-input>

      <div class="putaway-time-wrapper">
        <span class="putaway-time-label">生效时间：</span>
        <el-date-picker
          v-model="searchContent.addTime"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <el-input
        class="search-content-input"
        v-model="searchContent.operate_name"
        placeholder="请输入操作人"
      ></el-input>
      <el-input
        class="search-content-input"
        v-model="searchContent.review_name"
        placeholder="请输入审核人"
      ></el-input>
      <el-select
        class="search-content-select"
        v-model="searchContent.review"
        placeholder="请选择审核状态"
      >
        <el-option value="1" label="已审核">已审核</el-option>
        <el-option value="0" label="未审核">未审核</el-option>
      </el-select>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="resetSearchData">重置</el-button>
    </div>
    <div class="search-list">
      <el-table :data="groupList" border :height="oHeight">
        <el-table-column
          align="center"
          prop="id"
          label="ID"
          min-width="120"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="store_name"
          label="店铺名称"
          min-width="120"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="points_model"
          label="积分模式"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.points_model == 1 ? "预支付" : "后结算" }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="amount"
          label="商家购买金额(万元)"
          min-width="140"
        >
          <template slot-scope="scope">
            <span>{{ (scope.row.amount * 1).toFixed(6) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="money"
          label="平台赠送金额(万元)"
          min-width="140"
        >
          <template slot-scope="scope">
            <span>{{
              (scope.row.amount * scope.row.points_ratio).toFixed(6)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="points_ratio"
          label="赠送比率"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="start_date"
          label="开始时间"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{
              (scope.row.start_date * 1000) | dateFormatter("YYYY-MM-DD ")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="end_date"
          label="结束时间"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{
              (scope.row.end_date * 1000) | dateFormatter("YYYY-MM-DD ")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="update_time"
          label="关闭时间"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{
              (scope.row.update_time * 1000) | dateFormatter("YYYY-MM-DD ")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="store_add_points"
          label="累计购买充值积分"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="cjj_add_points"
          label="累计赠送充值积分"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="remindPoint"
          label="剩余积分"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{
              (
                (scope.row.amount * 10000 +
                  scope.row.amount * scope.row.points_ratio * 10000) *
                  100 -
                scope.row.cjj_add_points -
                scope.row.store_add_points
              ).toFixed(0)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="config_type"
          label="配送类别"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="operate_name"
          label="操作人"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="operate_time"
          label="操作时间"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{
              (scope.row.operate_time * 1000) | dateFormatter("YYYY-MM-DD ")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="review_name"
          label="审核人"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="review_time"
          label="审核时间"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{
              (scope.row.review_time * 1000) | dateFormatter("YYYY-MM-DD ")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="审核状态"
          min-width="120"
        >
          <template slot-scope="scope"
            ><span>{{
              scope.row.review == 0 ? "未审核" : "已审核"
            }}</span></template
          >
        </el-table-column>

        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          key="operate"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              v-show="scope.row.is_open == 1"
              class="operateBtn"
              type="text"
              @click="deleter(scope.row.id)"
              >关闭</el-button
            >
            <el-button
              v-show="scope.row.is_open == 2"
              class="operateBtn"
              type="text"
              style="color: gray"
              >已关闭</el-button
            >
            <el-button class="operateBtn" type="text" @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <div class="btn-group">
          <el-button
            size="mini"
            type="primary"
            class="btn-bottom"
            @click="expertData"
            >导出</el-button
          >
          <el-button
            size="mini"
            type="primary"
            class="btn-bottom"
            @click="showFn"
            >新增</el-button
          >
        </div>
        <!--分页部分-->
        <div class="paginationOne">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchContent.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchContent.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <default-opr ref="ceshi" @getList="getList"></default-opr>
  </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import { dateFormatter } from "../../../../common/js/util";
import defaultOpr from "./default-opr";
import Qs from "qs";
export default {
  components: { defaultOpr },
  data() {
    return {
      options: [],
      oHeight: 800,
      searchContent: {
        addTime: "",
        amount: "",
        cjj_add_points: "",
        config_type: "",
        id: "",
        is_open: "",
        points_model: "",
        points_ratio: "",
        start_date: "",
        store_add_points: "",
        store_id: "",
        store_nameHandWhite: "",
        update_time: "",
        currentPage: 1,
        pageSize: 10,
        review_name: "",
        review: "",
        operate_name: "",
      },
      groupList: [],

      total: 0,
    };
  },
  created() {
    this.getList();
    this.getStoreListFun();
  },

  methods: {
    ///新增按钮
    showFn(data) {
      this.$refs.ceshi.show_dialog_fn(data);
    },

    //// 导出操作

    expertData() {
      const data = {};
      data.page = this.searchContent.currentPage;
      data.eachNum = this.searchContent.pageSize;
      data.store_id = this.searchContent.store_id;
      data.store_name = this.searchContent.store_nameHandWhite;
      data.operate_name = this.searchContent.operate_name;
      data.review_name = this.searchContent.review_name;
      data.review = this.searchContent.review;

      if (this.searchContent.addTime) {
        data.start_date = dateFormatter(
          "YYYY-MM-DD 00:00:00",
          this.searchContent.addTime[0]
        );
        data.end_date = dateFormatter(
          "YYYY-MM-DD 23:59:59",
          this.searchContent.addTime[1]
        );
      }

      const origin = this.$store.state.location.origin;
      var url = origin + "/admin/points/index.php?act=points_config&op=getList&export=ok";
      var searchData = data;

      for (var key in searchData) {
        if (
          !(
            searchData[key] === null ||
            searchData[key] === "" ||
            searchData[key] === undefined ||
            key === "page" ||
            key === "pageSize" ||
            key === "currentPage"
          )
        ) {
          url += "&" + key + "=" + searchData[key];
        }
      }
      window.location.href = url;
    },

    // 选店铺id的列表
    getStoreListFun() {
      this.$http
        .post("/admin/points/index.php?act=points_config&op=getStroeList")
        .then((res) => {
          if (res.code == 1) {
            if (res.data) {
              this.options = res.data.list;
            } else {
              this.goodsList = [];
            }
          } else if (res.code == 2001) {
            this.goodsList = [];
          } else {
            alert(res.msg);
          }
        });
    },
    handleSizeChange(pageSize) {
      this.searchContent.pageSize = pageSize;
      this.searchContent.currentPage = 1;
      this.getList();
    },
    handleCurrentChange(page) {
      this.searchContent.currentPage = page;
      this.getList();
    },
    resetSearchData() {
      this.searchContent.export = "";
      this.searchContent.state = "";
      this.searchContent.store_nameHandWhite = "";
      this.searchContent.store_id = "";
      this.searchContent.addTime = "";
      this.searchContent.review_name = "";
      this.searchContent.review = "";
      this.searchContent.operate_name = "";
    },

    ////// 店铺详情总列表
    getList() {
      const data = {};
      data.page = this.searchContent.currentPage;
      data.eachNum = this.searchContent.pageSize;
      data.store_id = this.searchContent.store_id;
      data.store_name = this.searchContent.store_nameHandWhite;
      data.operate_name = this.searchContent.operate_name;
      data.review_name = this.searchContent.review_name;
      data.review = this.searchContent.review;
      if (this.searchContent.addTime) {
        data.start_date = dateFormatter(
          "YYYY-MM-DD 00:00:00",
          this.searchContent.addTime[0]
        );
        data.end_date = dateFormatter(
          "YYYY-MM-DD 23:59:59",
          this.searchContent.addTime[1]
        );
      }
      this.$http
        .post("/admin/points/index.php?act=points_config&op=getList", data)
        .then((res) => {
          if (res.code == 1) {
            if (res.data) {
              this.groupList = res.data.list;
              this.total = parseInt(res.data.totalNum);
            } else {
              this.groupList = [];
              this.total = 0;
            }
          } else if (res.code == 2001) {
            this.groupList = [];
            this.total = 0;
          } else {
            alert(res.msg);
          }
        });
    },
    search() {
      this.getList();
    },

    // 删除店铺
    deleter(id) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$http
            .post("/admin/points/index.php?act=points_config&op=closeConfig", {
              id: id,
            })
            .then(
              (res) => {
                if (res.code == 1) {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "success",
                  });
                  this.getList();
                } else {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "error",
                  });
                }
              },
              (err) => {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "error",
                });
              }
            );
          done();
        })
        .catch((_) => {});
    },
    // 点击编辑
    edit(storeInfo) {
      this.$refs.ceshi.show_dialog_fn(storeInfo);
    },
  },
  mounted() {
    resize(this);
  },
};
</script>
<style lang="scss" scoped>
.search-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  &-input {
    width: 200px;
  }
  .putaway-time-wrapper {
    .putaway-time-label {
      font-size: 14px;
    }
    display: flex;
    align-items: center;
    /deep/.el-range-separator {
      box-sizing: content-box;
    }
  }
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>